<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=format-detection content="telephone=no">
    <meta name=format-detection content="email=no">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=full-screen content=yes><meta name=browsermode content=application>
    <meta name=x5-orientation content=portrait><meta name=x5-fullscreen content=true>
    <meta name=x5-page-mode content=app>
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

    <title>文章详情</title>
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/index.js}"></script>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.1/skins/default/aliplayer-min.css" />
    <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.1/aliplayer-min.js"></script>
</head>
<body>
<div id="content">
    <div  class="prism-player" id="J_prismPlayer"></div>
    <section class="secs" v-html="contents.body">
    </section>
</div>

<script th:inline="javascript">
    var baseUrl = [[${baseUrl}]];
</script>

<script>
    var arr = {};
    var app = new Vue({
        el: '#content',
        data: {
            contents: {},
            player: null,
        },
        methods: {
            /*页面数据获取*/
            getNew: function () {
                var zxc = this;
                axios.post(baseUrl + 'community/v1/app/article/info/' + GetQueryString('id'), {
                }).then(function (response) {
                    zxc.contents = response.data.data;
                    document.title = zxc.contents.title;
                    if (zxc.contents.videoId !== '') {
                        axios.post(baseUrl + 'platform/wap/app/video/play/auth', {
                            videoId: zxc.contents.videoId
                        }).then(function (response) {
                            if (response.data.code === 20000) {
                                zxc.player = new Aliplayer({
                                    id: 'J_prismPlayer',
                                    width: '100%',
                                    height: '3rem',
                                    autoplay: false,
                                    vid : zxc.contents.videoId,
                                    playauth : response.data.data.playAuth,
                                    cover: response.data.data.image,
                                    useH5Prism:true,
                                    useFlashPrism:false,
                                    x5_video_position:'normal',
                                    x5_type:'h5'
                                },function(player){
                                    // player.play();
                                });
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            }
        },
        created: function (){
            this.getNew();
        }
    });
</script>
</body>
</html>